<template>
  <div>
    <input v-on="inputListeners"><br>
    <button v-on="inputListeners">1234</button>
    <button @click="myConsole(inputListeners)">click-my-input</button>
  </div>
</template>

<script>
  export default {
    name: "MyInput",
    methods: {
      myConsole(obj) {
        console.log(obj)
      }
    },
    computed: {
      inputListeners: function () {
        const vm = this
        // `Object.assign` 将所有的对象合并为一个新对象
        return Object.assign({},
          // 我们从父级添加所有的监听器
          this.$listeners,
          // 然后我们添加自定义监听器，
          // 或覆写一些监听器的行为
          {
            // 这里确保组件配合 `v-model` 的工作 复写input事件
            //native,$listeners监控子组件
            input: function (event) {
              vm.$emit('input', event.target.value)
            },
            click:function (event) {
              vm.$emit('myConsole', event)
            }
          }
        )
      }
    }
  }

</script>

<style scoped>

</style>
